<!--
 * @Description: 标准任务编辑问卷调查类统计
 * @Author: liyujie
 * @Date: 2021/11/1
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/11/1
-->
<template>
    <div class="wrapper">
        <div
            class="studentQuestion"
            id="studentQuestion"
        >
            <!-- 数据概括 -->
            <div class="module">
                <div class="module_header">
                    <p class="module_title">
                        数据概括
                    </p>
                    <p
                        class="modeule_back"
                        @click="prevPage()"
                    >
                        返回
                    </p>
                </div>
                <div class="model_ist">
                    <div
                        v-for="(name,key) in [
                            '任务名称',
                            '参与人数',
                            '任务领取时间'
                        ]"
                        :key="key"
                        class="model_item"
                    >
                        <p class="model_item_name">
                            {{ name }}
                        </p>
                        <p
                            v-if="key === 0"
                            class="model_item_content"
                        >
                            {{ task_info.task_title ? task_info.task_title : '--' }}
                        </p>
                        <p
                            v-if="key === 1"
                            class="model_item_content"
                        >
                            {{ task_info.accept_count ? task_info.accept_count : 0 }}
                        </p>
                        <p
                            v-if="key === 2"
                            class="model_item_content"
                        >
                            {{ task_info.apply_start_time * 1000 | dateFormatter('yyyy/MM/dd') }} - {{ task_info.apply_end_time * 1000 | dateFormatter('yyyy/MM/dd') }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- 占位背景块 -->
            <div :style="{width: '100%', minHeight: '12px', backgroundColor: '#f0f2f7'}" />

            <!-- 统计报表 -->
            <div class="module">
                <p class="module_title">
                    统计报表
                </p>
                <div class="module_filter">
                    <el-select
                        v-model="changeQuestion"
                        multiple
                        collapse-tags
                        placeholder="题目筛选"
                        size="medium"
                        @change="getShowList()"
                    >
                        <el-option
                            v-for="item in questionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <div class="module_button">
                        <div
                            class="module_button_down"
                            @click="dowmQuestionData()"
                        >
                            下载每条明细
                        </div>
                        <div
                            class="module_button_down"
                            @click="down()"
                        >
                            下载此页报告
                        </div>
                    </div>
                </div>

                <!-- 题目展示 -->
                <div
                    v-for="(option,index) in formList"
                    :key="index"
                    class="module_wrap"
                >
                    <!-- 单选题 -->
                    <template v-if="option.type == 2">
                        <div class="module_items">
                            <div class="module_nav">
                                <div class="module_nav_title">
                                    Q{{ index + 1 }}：{{ option.title }}
                                </div>
                                <div class="module_nav_info">
                                    <p class="module_nav_set">
                                        显示设置:
                                    </p>
                                    <div
                                        class="module_nav_list"
                                        @click="showViewData(option, index, 'table')"
                                    >
                                        <i
                                            v-if="!option.flag"
                                            class="iconfont el-icon-hand-check_box_def"
                                        />
                                        <i
                                            v-if="option.flag"
                                            class="iconfont el-icon-hand-check_box_sel"
                                        />
                                        <p class="module_nav_name">
                                            显示表格
                                        </p>
                                    </div>
                                    <div
                                        class="module_nav_list"
                                        @click="showViewData(option, index, 'echarts')"
                                    >
                                        <i
                                            v-if="option.status"
                                            class="iconfont el-icon-hand-check_box_def"
                                        />
                                        <i
                                            v-if="!option.status"
                                            class="iconfont el-icon-hand-check_box_sel"
                                        />
                                        <p class="module_nav_name">
                                            显示环形图
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- 环形图 -->
                            <div v-if="!option.status">
                                <div
                                    class="echarts2"
                                    :id="'echarts2' + index"
                                />
                            </div>
                            <!-- 表格 -->
                            <div
                                v-if="option.flag"
                                class="module_table"
                            >
                                <el-table
                                    :data="option.option"
                                    height="100%"
                                    style="width: 100%;"
                                    border
                                >
                                    <el-table-column
                                        prop="title"
                                        label="选项"
                                        show-overflow-tooltip
                                        :formatter="emptyFormatter"
                                        align="left"
                                    />
                                    <el-table-column
                                        prop="submit_count"
                                        label="小计"
                                        show-overflow-tooltip
                                        align="left"
                                    />
                                    <el-table-column
                                        prop="proportion"
                                        label="回复情况"
                                        show-overflow-tooltip
                                        :formatter="emptyFormatter"
                                        align="left"
                                    >
                                        <template slot-scope="{row}">
                                            {{ row.submit_count | filterNumber(option) }}%
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </template>

                    <!-- 多选题 -->
                    <template v-if="option.type == 3">
                        <div class="module_items">
                            <div class="module_nav">
                                <div class="module_nav_title">
                                    Q{{ index + 1 }}：{{ option.title }}
                                </div>
                                <div class="module_nav_info">
                                    <p class="module_nav_set">
                                        显示设置:
                                    </p>
                                    <div
                                        class="module_nav_list"
                                        @click="showViewData(option, index, 'table')"
                                    >
                                        <i
                                            v-if="!option.flag"
                                            class="iconfont el-icon-hand-check_box_def"
                                        />
                                        <i
                                            v-if="option.flag"
                                            class="iconfont el-icon-hand-check_box_sel"
                                        />
                                        <p class="module_nav_name">
                                            显示表格
                                        </p>
                                    </div>
                                    <div
                                        class="module_nav_list"
                                        @click="showViewData(option, index, 'echarts')"
                                    >
                                        <i
                                            v-if="option.status"
                                            class="iconfont el-icon-hand-check_box_def"
                                        />
                                        <i
                                            v-if="!option.status"
                                            class="iconfont el-icon-hand-check_box_sel"
                                        />
                                        <p class="module_nav_name">
                                            显示柱形图
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- 柱形图 -->
                            <div v-if="!option.status">
                                <div
                                    class="echarts"
                                    :id="'echarts' + index"
                                />
                            </div>
                            <!-- 表格 -->
                            <div
                                v-if="option.flag"
                                class="module_table"
                            >
                                <el-table
                                    :data="option.option"
                                    height="100%"
                                    style="width: 100%;"
                                    border
                                >
                                    <el-table-column
                                        prop="title"
                                        label="选项"
                                        show-overflow-tooltip
                                        :formatter="emptyFormatter"
                                        align="left"
                                    />
                                    <el-table-column
                                        prop="submit_count"
                                        label="小计"
                                        show-overflow-tooltip
                                        align="left"
                                    />
                                    <el-table-column
                                        prop="proportion"
                                        label="回复情况"
                                        show-overflow-tooltip
                                        :formatter="emptyFormatter"
                                        align="left"
                                    >
                                        <template slot-scope="{row}">
                                            {{ row.submit_count | filterNumber(option) }}%
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </template>

                    <!-- 图片选项 -->
                    <template v-if="option.type == 10">
                        <div class="module_items">
                            <div class="module_nav">
                                <div class="module_nav_title">
                                    Q{{ index + 1 }}：{{ option.title }}
                                </div>
                                <div class="module_nav_info">
                                    <p class="module_nav_set">
                                        显示设置:
                                    </p>
                                    <div
                                        class="module_nav_list"
                                        @click="showViewData(option, index, 'table')"
                                    >
                                        <i
                                            v-if="!option.flag"
                                            class="iconfont el-icon-hand-check_box_def"
                                        />
                                        <i
                                            v-if="option.flag"
                                            class="iconfont el-icon-hand-check_box_sel"
                                        />
                                        <p class="module_nav_name">
                                            显示表格
                                        </p>
                                    </div>
                                    <div
                                        class="module_nav_list"
                                        @click="showViewData(option, index, 'echarts')"
                                    >
                                        <i
                                            v-if="option.status"
                                            class="iconfont el-icon-hand-check_box_def"
                                        />
                                        <i
                                            v-if="!option.status"
                                            class="iconfont el-icon-hand-check_box_sel"
                                        />
                                        <p class="module_nav_name">
                                            显示柱形图
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- 柱形图 -->
                            <div v-if="!option.status">
                                <div
                                    class="echarts3"
                                    :id="'echarts3' + index"
                                />
                            </div>
                            <!-- 表格 -->
                            <div
                                v-if="option.flag"
                                class="module_table"
                            >
                                <el-table
                                    :data="option.option"
                                    height="100%"
                                    style="width: 100%;"
                                    border
                                >
                                    <el-table-column
                                        type="index"
                                        width="80"
                                        label="序号"
                                        align="center"
                                    />
                                    <el-table-column
                                        label="附件信息"
                                        show-overflow-tooltip
                                        :formatter="emptyFormatter"
                                        align="left"
                                    >
                                        <template slot-scope="{row}">
                                            <div class="module_option">
                                                <img
                                                    :src="row.image_url"
                                                    class="module_option_image"
                                                >
                                                <p>
                                                    {{ row.title }}
                                                </p>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="操作"
                                        show-overflow-tooltip
                                        align="left"
                                    >
                                        <template slot-scope="{row}">
                                            {{ isNaN(Number(row.submit_count / option.submit_option_count * 100).toFixed(2)) ? 0 : Number(row.submit_count / option.submit_option_count * 100).toFixed(2) }}%
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </template>

                    <!-- 图片上传 -->
                    <template v-if="option.type == 5">
                        <div class="module_items">
                            <div class="module_nav">
                                <div class="module_nav_title">
                                    Q{{ index + 1 }}：{{ option.title }}
                                </div>
                            </div>
                            <!-- 表格 -->
                            <div class="module_table">
                                <el-table
                                    :data="uploadImgList"
                                    height="100%"
                                    style="width: 100%;"
                                    border
                                >
                                    <el-table-column
                                        type="index"
                                        width="80"
                                        label="序号"
                                        align="center"
                                    />
                                    <el-table-column
                                        prop="title"
                                        label="选项"
                                        show-overflow-tooltip
                                        :formatter="emptyFormatter"
                                        align="left"
                                    >
                                        <template slot-scope="{row, $index}">
                                            <div class="module_option">
                                                <img
                                                    v-for="(img,i) in row.value"
                                                    :key="i"
                                                    :src="img"
                                                    class="module_option_image"
                                                    :style="{marginRight: '8px', cursor: 'pointer'}"
                                                    @click="handlePreview(row.value, $index)"
                                                >
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="操作"
                                        show-overflow-tooltip
                                        align="center"
                                    >
                                        <template slot-scope="{row, $index}">
                                            <el-button
                                                type="text"
                                                @click="handlePreview(row.value, 0)"
                                            >
                                                预览
                                            </el-button>
                                            <el-button
                                                type="text"
                                                @click="downImages(row.value)"
                                            >
                                                下载
                                            </el-button>
                                            <el-button
                                                type="text"
                                                @click="checkQuestion(value_list5[$index])"
                                            >
                                                查看答卷
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!-- /分页 -->
                                <div class="pagination-wrapper clearfixNew">
                                    <el-pagination
                                        background
                                        :current-page.sync="page.now_page"
                                        :page-size="page.page_size"
                                        layout="total, prev, pager, next, jumper"
                                        :total="page.total_count"
                                        @current-change="getTableDataImg"
                                    />
                                </div>
                            </div>
                        </div>
                    </template>

                    <!-- 单项填空 -->
                    <template v-if="option.type == 1">
                        <div class="module_items">
                            <div class="module_nav">
                                <div class="module_nav_title">
                                    Q{{ index + 1 }}：{{ option.title }}
                                </div>
                            </div>
                            <!-- 表格 -->
                            <div class="module_table">
                                <el-table
                                    :data="textContentList"
                                    height="100%"
                                    style="width: 100%;"
                                    border
                                >
                                    <el-table-column
                                        type="index"
                                        label="序号"
                                        align="center"
                                        :width="100"
                                    />
                                    <el-table-column
                                        prop="text"
                                        label="回答详情"
                                        show-overflow-tooltip
                                        :formatter="emptyFormatter"
                                        align="left"
                                    >
                                        <template slot-scope="{row}">
                                            {{ row.text }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="操作"
                                        show-overflow-tooltip
                                        align="center"
                                    >
                                        <template slot-scope="{row, $index}">
                                            <el-button
                                                type="text"
                                                @click="checkQuestion(value_list1[$index])"
                                            >
                                                查看详情
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!-- /分页 -->
                                <div class="pagination-wrapper clearfixNew">
                                    <el-pagination
                                        background
                                        :current-page.sync="textPage.now_page"
                                        :page-size="textPage.page_size"
                                        layout="total, prev, pager, next, jumper"
                                        :total="textPage.total_count"
                                        @current-change="getTableDataText"
                                    />
                                </div>
                            </div>
                        </div>
                    </template>

                    <!-- 多项填空 -->
                    <template v-if="option.type == 11">
                        <div class="module_items">
                            <div class="module_nav">
                                <div class="module_nav_title">
                                    Q{{ index + 1 }}：多项填空题
                                </div>
                            </div>
                            <!-- 表格 -->
                            <div class="module_table">
                                <el-table
                                    :data="config.list"
                                    height="100%"
                                    style="width: 100%;"
                                    border
                                >
                                    <el-table-column
                                        type="index"
                                        label="序号"
                                        align="center"
                                        :width="100"
                                    />
                                    <el-table-column
                                        v-for="(item,j) in config.form_config"
                                        :key="j"
                                        :label="item.title"
                                        show-overflow-tooltip
                                        :formatter="emptyFormatter"
                                        align="left"
                                    >
                                        <template slot-scope="{row}">
                                            {{ row[0]['form_data_value'][item.name] }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="操作"
                                        show-overflow-tooltip
                                        align="center"
                                    >
                                        <template slot-scope="{row, $index}">
                                            <el-button
                                                type="text"
                                                @click="checkQuestion(value_list11[$index])"
                                            >
                                                查看详情
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!-- /分页 -->
                                <div class="pagination-wrapper clearfixNew">
                                    <el-pagination
                                        background
                                        :current-page.sync="textsPage.now_page"
                                        :page-size="textsPage.page_size"
                                        layout="total, prev, pager, next, jumper"
                                        :total="textsPage.total_count"
                                        @current-change="getTableDataMoreText"
                                    />
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <!-- 返回 -->
                <el-button
                    size="medium"
                    type="default"
                    :style="{
                        width: '160px',
                        marginTop: '50px',
                        marginBottom: '28px',
                        marginLeft: '50%',
                        transform: 'translateX(-50%)'
                    }"
                    @click="prevPage()"
                >
                    返回
                </el-button>
            </div>

            <!-- 图片预览 -->
            <img-preview ref="preview" />
        </div>
    </div>
</template>

<script>
import ImgPreview from "@/components/common/img-preview";
import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf";
export default {
    name: 'StandardTaskQuestionnaireStatistics',
    components: {
        ImgPreview
    },
    filters: {
        filterNumber (submit_count, option) {
            return (isNaN(Number(submit_count / option.submit_option_count)) ? 0 : Number(submit_count / option.submit_option_count)).toFixed(2) * 100;
        }
    },
    computed: {
    },
    data() {
        return {
            task_no: '',
            changeQuestion: [],//筛选题目
            questionList: [],//题目名称列表
            task_info: {
                task_no: '',
                task_title: '',
                accept_count: '',
                apply_start_time: '',
                apply_end_time: ''
            },
            formList: [
                // {
                //     submit_count: 10,
                //     title: '我是一个单选题',
                //     type: 2,
                //     option: [
                //         {
                //             title: '我是题目名称',
                //             submit_count: 1
                //         },
                //         {
                //             title: '我是题目名称222',
                //             submit_count: 7
                //         },
                //         {
                //             title: '我是题目名称333',
                //             submit_count: 2
                //         }
                //     ]
                // },
                // {
                //     submit_count: 10,
                //     title: '我是一个多选题',
                //     type: 3,
                //     option: [
                //         {
                //             title: '我是题目名称',
                //             submit_count: 1
                //         },
                //         {
                //             title: '我是题目名称222',
                //             submit_count: 7
                //         },
                //         {
                //             title: '我是题目名称333',
                //             submit_count: 2
                //         }
                //     ]
                // },
                // {
                //     submit_count: 10,
                //     title: '我是一个图片选项',
                //     type: 10,
                //     option: [
                //         {
                //             title: '我是题目名称',
                //             submit_count: 1
                //         },
                //         {
                //             title: '我是题目名称222',
                //             submit_count: 7
                //         },
                //         {
                //             title: '我是题目名称333',
                //             submit_count: 2
                //         }
                //     ]
                // },
                // {
                //     title: '我是图片上传啊啊啊啊啊啊',
                //     type: 5
                // },
                // {
                //     title: '我是单项天空啊啊啊啊啊啊',
                //     type: 1
                // },
                // {
                //     title: '我是多项天空啊啊啊啊啊啊',
                //     type: 11
                // }
            ],
            // 单选题
            showTabale: false,//显示表格
            showEcharts: true,//显示环形图
            pieList: [],//单选饼图数据
            radioIndex: 0,//单选题序号
            // 多选题
            showTabale2: false,//显示表格
            showEcharts2: true,//显示柱形图
            xList: [],//x轴数据
            yList: [],//y轴数据
            textsIndex: 0,//多选题序号
            // 图片选项
            showTabale3: false,//显示表格
            showEcharts3: true,//显示柱形图
            imgIndex: 0,//图片选项序号
            xImage: [],//多图x轴
            yImage: [],
            xImageUrl: [],
            value_list5: [],//编号
            // 图片上传数据
            uploadImgList: [
                // {
                //     value: [
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180',
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180',
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180',
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180'
                //     ]
                // },
                // {
                //     value: [
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180',
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180',
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180',
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180',
                //         'http://pic.wxhand.com/dev/student_image/c71e84a2197abb9c5df2cac6f10fa180'
                //     ]
                // }
            ],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            // 单项填空
            textContentList: [
                // {
                //     text: '香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉香蕉'
                // },
                // {
                //     text: '波洛波洛波洛波洛波洛波洛波洛波洛波洛波洛'
                // }
            ],
            value_list1: [],
            textPage: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            // 多项填空题
            config: {
                form_config: [
                    // {
                    //     title: '你喜欢吃什么水果',
                    //     name: '3c5ac492'
                    // },
                    // {
                    //     title: '你去过哪里旅游?',
                    //     name: '3c2ac492'
                    // }
                ],
                list: [
                    // {
                    //     form_data_value: {
                    //         '3c5ac492': '香蕉',
                    //         '3c2ac492': '南京'
                    //     }
                    // },
                    // {
                    //     form_data_value: {
                    //         '3c5ac492': '橘子',
                    //         '3c2ac492': '北京'
                    //     }
                    // }
                ]
            },
            value_list11: [],
            textsPage: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
        };
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '工作'}, {
            title: '平台标准任务',
            path: '/student/standard-task-list'
        }, {title: '数据统计'}]);

        this.task_no = this.$route.query.task_no ? this.$route.query.task_no : '';
        this.init();
    },
    methods: {
        /**
         * @description 数据初始化
         *      update 更新数据使用
         */
        init (update = false, filter = false) {
            this.$post('/student/task_stuagent%5Cget_task_submit_form_statistic', {
                task_no: this.task_no
            },resp => {
                if (resp.code == 1) {
                    this.task_info = {
                        ...resp.data.task_info
                    };

                    // 筛选过滤元数据处理
                    if(!filter) {
                        this.formList = resp.data.list;

                        // 获取筛选标题
                        this.questionList = this.formList.reduce((cur,next) => {
                            // 注意⚠️ 新增类型需要手动添加
                            if([1,2,3,5,10,11].includes(next.type)) {
                                cur.push({
                                    value: next.title,
                                    label: next.title
                                });
                            }
                            return cur;
                        }, []);
                    } else {
                        this.formList = resp.data.list.reduce((cur,next) => {
                            console.log(this.changeQuestion.includes(next.title), next.title);
                            if(this.changeQuestion.includes(next.title)) {
                                cur.push(next);
                            }
                            return cur;
                        }, []);
                    }

                    // 设置状态
                    this.formList.map(item => {
                        this.$set(item, 'status', true);//图标
                        this.$set(item, 'flag', true);//表格
                    });

                    // 数据过滤处理
                    for(let i=0; i<this.formList.length; i++) {
                        let submit_option_count = this.formList[i]['submit_option_count'];
                        let index = this.formList[i]['index'];
                        let type = this.formList[i]['type'];
                        let option = [],
                            value_list = [];

                        if(typeof(this.formList[i]['option']) !== undefined) {
                            option = this.formList[i]['option'];
                        }

                        if(typeof(this.formList[i]['value_list']) !== undefined) {
                            value_list = this.formList[i]['value_list'];
                        }

                        // 单选题
                        if(type === 2 && !update) {
                            this.showEcharts = true;
                            this.pieList = option.reduce((cur,next) => {
                                cur.push({
                                    value: next.submit_count,
                                    name: next.title
                                });
                                return cur;
                            }, []);

                            setTimeout(() => {
                                this.setEchartsPie(i);
                            }, 200);
                        }

                        // 多选题
                        if(type === 3 && !update) {
                            this.showEcharts2 = true;
                            this.xList = option.reduce((cur,next) => {
                                cur.push(next.title);
                                return cur;
                            }, []);
                            this.yList = option.reduce((cur,next) => {
                                const number = (isNaN(Number(next.submit_count / submit_option_count * 100)) ? 0 : Number(next.submit_count / submit_option_count * 100)).toFixed(0);

                                cur.push(number);
                                return cur;
                            }, []);

                            setTimeout(() => {
                                this.setEchartsCylindrical(i);
                            }, 200);
                        }

                        // 多图选项
                        if(type === 10 && !update) {
                            this.showEcharts3 = true;

                            this.xImage = option.reduce((cur,next) => {
                                cur.push(next.title.length > 6 ? next.title.slice(0,6) + '...' : next.title);
                                // cur.push(next.title);
                                return cur;
                            }, []);
                            this.xImageUrl = option.reduce((cur,next) => {
                                cur.push(next.image_url);
                                return cur;
                            }, []);
                            this.yImage = option.reduce((cur,next) => {
                                const number = (isNaN(Number(next.submit_count / submit_option_count * 100)) ? 0 : Number(next.submit_count / submit_option_count * 100)).toFixed(0);

                                cur.push(number);
                                return cur;
                            }, []);

                            setTimeout(() => {
                                this.setEchartsImgCylindrical(i);
                            }, 200);
                        }

                        // 图片上传
                        if(type === 5) {
                            this.imgIndex = index;
                            this.value_list5 = this.formList[i]['value_list'].reduce((cur,next) => {
                                cur.push(next.apply_no);
                                return cur;
                            }, []);
                            this.getTableDataImg(1);
                        }

                        // 单项填空
                        if(type === 1 && !update) {
                            this.radioIndex = index;
                            this.value_list1 = this.formList[i]['value_list'].reduce((cur,next) => {
                                cur.push(next.apply_no);
                                return cur;
                            }, []);
                            this.getTableDataText(1);
                        }

                        // 多项填空
                        if(type === 11 && !update) {
                            this.textsIndex = index;
                            this.value_list11 = this.formList[i]['value_list'].reduce((cur,next) => {
                                cur.push(next.apply_no);
                                return cur;
                            }, []);
                            this.getTableDataMoreText(1);
                        }
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 图片上传数据
         */
        getTableDataImg (page) {
            this.$post('/student/task_stuagent%5Cget_submit_form_data_answer_list', {
                page_id: page || this.page.now_page,
                task_no: this.task_no,
                index: this.imgIndex
            }, resp => {
                if (resp.code == 1) {
                    let arr = [];

                    resp.data.list.map(item => {
                        let value = item.form_data.value.reduce((cur,next) => {
                            cur.push(next.value);
                            return cur;
                        }, []);

                        arr.push({
                            value: value
                        });

                    });

                    this.uploadImgList = arr;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 单项填空数据
         */
        getTableDataText (page) {
            this.$post('/student/task_stuagent%5Cget_submit_form_data_answer_list', {
                page_id: page || this.textPage.now_page,
                task_no: this.task_no,
                index: this.radioIndex
            }, resp => {
                if (resp.code == 1) {
                    this.textContentList = resp.data.list.reduce((cur,next) => {
                        cur.push({
                            text: next.form_data.value
                        });
                        return cur;
                    }, []);
                    this.textPage.now_page = resp.data.page.now_page;
                    this.textPage.total_count = resp.data.page.total_count;
                    this.textPage.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 多项填空数据
         */
        getTableDataMoreText (page) {
            this.$post('/student/task_stuagent%5Cget_submit_form_data_answer_list', {
                page_id: page || this.textPage.now_page,
                task_no: this.task_no,
                index: this.textsIndex
            }, resp => {
                if (resp.code == 1) {
                    let form_config = [],
                        list = [];

                    if(!resp.data.list.length) return false;

                    form_config = resp.data.list[0]['options'].reduce((cur,next) => {
                        cur.push({
                            title: next.title,
                            name: next.value
                        });
                        return cur;
                    }, []);

                    list = resp.data.list.map(next => {
                        let form_data = next.form_data.value;
                        let arr = [];
                        let form_data_value = {};

                        form_data.map(item => {
                            form_data_value[item.value] = item.edit_content;
                        });

                        arr.push({
                            form_data_value: form_data_value
                        });

                        return arr;
                    });
                    console.log('config', this.config);

                    this.$set(this.config, 'form_config', form_config);
                    this.$set(this.config, 'list', list);

                    console.log('config', this.config);
                    this.textsPage.now_page = resp.data.page.now_page;
                    this.textsPage.total_count = resp.data.page.total_count;
                    this.textsPage.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 显示表格/图标
         *  @type table/echarts
         */
        showViewData (row, index, type) {

            if(type == 'echarts') {
                if(row.status) {
                    this.$set(row, 'status', false);
                    this.$nextTick(() => {
                        if(row.type == 2) {
                            this.setEchartsPie(index);
                        } else if (row.type == 3) {
                            this.setEchartsCylindrical(index);
                        } else if (row.type == 10) {
                            this.setEchartsImgCylindrical(index);
                        }
                    });
                } else {
                    this.$set(row, 'status', true);
                }
            }

            if(type == 'table') {
                if(row.flag) {
                    this.$set(row, 'flag', false);
                } else {
                    this.$set(row, 'flag', true);
                }
            }


            this.$forceUpdate();
        },

        /**
         * @description 柱形图->多选题
         */
        setEchartsCylindrical (index) {
            let echarts = document.getElementById('echarts' + index);
            let my_echarts = this.$echarts.init(echarts);

            let option = {
                // x轴数据
                xAxis: {
                    type: 'category',
                    data: this.xList
                },
                // y轴数据
                yAxis: {
                    min: 0,
                    max: 100,
                    position: 'left',
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                // 提示框组件
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                // series
                series: [
                    {
                        name: "培训测评",
                        type: 'bar',
                        color: '#409EFF',
                        data: this.yList,
                        markPoint: {
                            data: [{
                                type: "max",
                                name: "Max"
                            }, {
                                type: "min",
                                name: "Min"
                            }]
                        },
                        markLine: {
                            data: [{
                                type: "average",
                                name: "Avg"
                            }]
                        }
                    }
                ],
                //操作
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            show: false
                        },
                        dataView: {
                            readOnly: true
                        },
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    },
                    right: 15,
                    height: 8
                }
            };

            my_echarts.setOption(
                option
            );
        },

        /**
         * @description 柱形图->图片选项
         */
        setEchartsImgCylindrical (index) {
            let echarts = document.getElementById('echarts3' + index);
            let my_echarts = this.$echarts.init(echarts);

            let rich = {};

            this.xImageUrl.map(async (item, index) => {
                // const baseImg = await this.getUrlBase64(item);

                rich[index] = {
                    width: 22,
                    height: 22,
                    align: 'center',
                    backgroundColor: {
                        // image: next ? baseImg : item
                        image: item
                    }
                };
            });

            setTimeout(() => {
                let option = {
                    // x轴数据
                    xAxis: {
                        type: 'category',
                        data: this.xImage,
                        axisLabel: {
                            interval: 0,
                            rotate: -30,
                            lineHeight: 50,
                            formatter: function (val, index) {
                                console.log('index', `{warnValue|}  `, index);
                                // return next ? val : `{${index}|}  ` + val;
                                return val;
                            },
                            rich: rich
                        },
                    },
                    // y轴数据
                    yAxis: {
                        min: 0,
                        max: 100,
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    },
                    // 提示框组件
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow"
                        }
                    },
                    // series
                    series: [
                        {
                            name: "培训测评",
                            type: 'bar',
                            color: '#409EFF',
                            data: this.yImage,
                            markPoint: {
                                data: [{
                                    type: "max",
                                    name: "Max"
                                }, {
                                    type: "min",
                                    name: "Min"
                                }]
                            },
                            markLine: {
                                data: [{
                                    type: "average",
                                    name: "Avg"
                                }]
                            }
                        }
                    ],
                    //操作
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                show: false
                            },
                            dataView: {
                                readOnly: true
                            },
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        },
                        right: 15,
                        height: 8
                    }
                };

                my_echarts.setOption(
                    option
                );
            }, 0);

        },

        /**
         * @description 饼图
         */
        setEchartsPie (index) {
            let echarts = document.getElementById('echarts2' + index);
            let my_echarts = this.$echarts.init(echarts);

            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '3%',
                    left: 'center',
                    itemGap: 30,
                    type: 'scroll'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: this.pieList,
                        label: {
                            color: 'rgba(102, 102, 102, 1)'
                        }
                    }
                ],
                color:[
                    '#3fb1e3',
                    '#6be6c1',
                    '#626c91',
                    '#a0a7e6',
                    '#c4ebad',
                    '#96dee8',
                    '#2ec7c9',
                    '#b6a2de',
                    '#5ab1ef',
                    '#ffb980',
                    '#d87a80',
                    '#8d98b3',
                    '#e5cf0d',
                    '#97b552',
                    '#4ea397',
                    '#22c3aa',
                    '#7bd9a5',
                    '#d0648a',
                    '#f58db2',
                    '#f2b3c9',
                    '#4ea397',
                    '#22c3aa',
                    '#7bd9a5',
                    '#d0648a',
                    '#f58db2',
                    '#f2b3c9'
                ],
                //操作
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            show: false
                        },
                        dataView: {
                            readOnly: true
                        },
                        restore: {},
                        saveAsImage: {}
                    },
                    right: 15,
                    height: 8
                }
            };

            my_echarts.setOption(
                option
            );
        },

        /**
         * @description 在线图片转base64
         */
        getUrlBase64(url) {
            return new Promise((resolve,reject) => {
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                var img = new Image();

                img.crossOrigin = 'Anonymous';
                img.src = url;
                img.onload = function () {
                    canvas.height = 96;
                    canvas.width = 96;
                    ctx.drawImage(img, 0, 0, 60, 85);
                    var dataURL = canvas.toDataURL("image/" + 'png');

                    resolve(dataURL);
                    // callback.call(this, dataURL); //回掉函数获取Base64编码
                    canvas = null;
                };
            });
        },

        /**
         * @description 下载报告
         */
        async down () {
            // if(!!this.xImageUrl.length) {
            //     this.setEchartsImgCylindrical(true);
            // }
            if(!!this.uploadImgList.length) {
                let arr = [];

                for(let i=0; i<this.uploadImgList.length; i++) {
                    let value = this.uploadImgList[i]['value'];
                    let val = [];

                    for(let j=0; j<value.length; j++) {
                        val.push(await this.getUrlBase64(value[j]));
                    }

                    arr.push({
                        value: val
                    });
                }

                this.uploadImgList = arr;
            }

            for(let i=0; i<this.formList.length; i++) {
                if(this.formList[i]['type'] == 10) {
                    const option = this.formList[i]['option'];

                    option.map(async item => {
                        this.$set(item, 'image_url', await this.getUrlBase64(item.image_url));
                    });
                }
            }

            setTimeout(() => {
                this.getPdf(`问卷调查-${this.task_info.task_title}`, 'studentQuestion');
            },300);

        },

        /**
         * @description 页面截图，生成pdf文件
         */
        getPdf (title, domClass) {
            html2canvas(document.querySelector('#studentQuestion'), {
                allowTaint: true
            }).then(canvas => {
                let contentWidth = canvas.width;
                let contentHeight = canvas.height;
                let pageHeight = contentWidth / 592.28 * 841.89;
                let leftHeight = contentHeight;
                let position = 0;
                let imgWidth = 595.28;
                let imgHeight = 592.28 / contentWidth * contentHeight;
                let pageData = canvas.toDataURL('image/jpeg', 1.0);
                // eslint-disable-next-line new-cap
                let PDF = new jsPDF('', 'pt', 'a4');

                if (leftHeight < pageHeight) {
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        if (leftHeight > 0) {
                            PDF.addPage();
                        }
                    }
                }
                PDF.save(title + '.pdf');
                this.init(true);
            });
        },

        /**
         * @description 下载每条明细
         */
        dowmQuestionData () {
            let base = this.$baseUrl;
            let params = {
                student_keyword: '',
                task_keyword: this.task_no,
                school_name: '',
                status: 99,
                verify_status: 1,
                award_status: 99,
                task_category: 99,
                start_time: '',
                end_time: '',
            };
            let ticket = localStorage.getItem('sessionTicket');
            let queryStr = Object.keys(params)
                .map(key => `${key}=${params[key]}`)
                .join('&');
            let url = `${base}/student/task_stuagent_student_task%5Cexport_step_task_report_list?${queryStr}&__ticket=${ticket}`;

            window.open(url);
        },

        /**
         * @description 图片预览
         */
        handlePreview (images, index = 0) {
            this.$refs.preview.show(images, index);
        },

        /**
         * @description 下载
         */
        downImages (list) {
            list.map(images => {
                this.dowmImages(images);
            });
        },

        /**
         * @description 下载图片
         */
        dowmImages (imgsrc, name = 'images') {
            let image = new Image();

            image.setAttribute('crossOrigin', 'anonymous');
            image.onload = () => {
                let canvas = document.createElement('canvas');

                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext('2d');

                context.drawImage(image, 0, 0, image.width, image.height);

                let url = canvas.toDataURL('image/png');
                let a = document.createElement('a');
                let event = new MouseEvent('click');

                a.download = name || 'photo';
                a.href = url;
                a.dispatchEvent(event);
            };
            image.src = imgsrc;
        },

        /**
         * @description 题目筛选
         */
        getShowList () {
            console.log('changeQuestion', this.changeQuestion);

            if(!!this.changeQuestion.length) {
                this.init(false, true);
            } else {
                this.init(false, false);
            }
        },

        /**
         * @description 查看答卷详情
         */
        checkQuestion (apply_no) {
            let routeData = this.$router.resolve({
                name: 'standardTaskReceiveDetail',
                query: {
                    apply_no: apply_no
                },
                param: {}
            });

            window.open(routeData.href, '_blank');
        },

        /**
         * @description 返回
         */
        prevPage () {
            this.$router.push({
                name: 'standardTaskList'
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    },
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    margin: 12px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 4px;
    }
}
.echarts {
    width: calc(100% - 144px);
    margin-left: 72px;
    height: 458px;
}
.echarts2 {
    width: calc(100% - 144px);
    margin-left: 72px;
    height: 642px;
}
.echarts3 {
    width: calc(100% - 144px);
    margin-left: 72px;
    height: 488px;
}
.studentQuestion {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow-y: auto;
    .module {
        width: 100%;
        min-height: 202px;
        overflow: hidden;
        padding: 24px 0;
        .module_title {
            height: 25px;
            line-height: 25px;
            color: rgba(51, 51, 51, 1);
            font-weight: 500;
            font-size: 18px;
            position: relative;
            margin-left: 44px;
            &::before {
                content: '';
                position: absolute;
                width: 2px;
                height: 18px;
                background-color: rgba(24, 144, 255, 1);
                top: 4px;
                left: -10px;
            }
        }
        .module_header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .module_title {
                height: 25px;
                line-height: 25px;
                color: rgba(51, 51, 51, 1);
                font-weight: 500;
                font-size: 18px;
                position: relative;
                margin-left: 44px;
                &::before {
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 18px;
                    background-color: rgba(24, 144, 255, 1);
                    top: 4px;
                    left: -10px;
                }
            }
            .modeule_back {
                color:rgba(102, 102, 102, 1);
                font-size: 14px;
                cursor: pointer;
                margin-right: 44px;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .model_ist {
            width: calc(100% - 88px);
            margin-left: 44px;
            margin-top: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .model_item {
                flex: 1;
                border: 1px rgba(238, 238, 238, 1) solid;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 105px;
                box-sizing: border-box;
                padding: 0 24px;
                .model_item_name {
                    color: rgba(153, 153, 153, 1);
                    font-size: 14px;
                    line-height: 20px;
                    margin-bottom: 12px;
                }
                .model_item_content {
                    color: rgba(51, 51, 51, 1);
                    line-height: 25px;
                    font-size: 18px;
                    font-weight: 500;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
            .model_item:nth-child(2) {
                margin: 0 20px;
            }
        }
        .module_filter {
            width: calc(100% - 88px);
            margin-left: 44px;
            height: 84px;
            border-bottom: 1px rgba(235, 238, 245, 1) solid;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .module_button {
                display: flex;
                align-items: center;
                .module_button_down {
                    width: 120px;
                    height: 36px;
                    border: 1px rgba(32, 160, 255, 1) solid;
                    border-radius: 4px;
                    text-align: center;
                    line-height: 36px;
                    color: rgba(32, 160, 255, 1);
                    font-size: 14px;
                    cursor: pointer;
                }
                .module_button_down:first-child {
                    margin-right: 24px;
                }
            }
        }
        .module_wrap {
            .module_items {
                width: calc(100% - 88px);
                margin-left: 44px;
                border-bottom: 1px rgba(235, 238, 245, 1) solid;
                padding: 38px 0 51px 0;
                .module_nav {
                    width: 100%;
                    height: 28px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 30px;
                    .module_nav_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 20px;
                        font-weight: 500;
                    }
                    .module_nav_info {
                        display: flex;
                        align-items: center;
                        .module_nav_set {
                            color: rgba(102, 102, 102, 1);
                            font-size: 14px;
                            margin-right: 16px;
                        }
                        .module_nav_list {
                            display: flex;
                            align-items: center;
                            cursor: pointer;
                            .el-icon-hand-check_box_def {
                                color: rgba(153, 153, 153, 1);
                                font-size: 14px;
                            }
                            .el-icon-hand-check_box_sel {
                                color: rgba(32, 160, 255, 1);
                                font-size: 14px;
                            }
                            .module_nav_name {
                                color: rgba(102, 102, 102, 1);
                                font-size: 14px;
                                margin-left: 10px;
                            }
                        }
                        .module_nav_list:nth-child(2) {
                            margin-right: 32px;
                        }
                    }
                }
                .module_table {
                    width: calc(100% - 144px);
                    margin-left: 72px;
                    .module_option {
                        display: flex;
                        align-items: center;
                        .module_option_image {
                            width: 48px;
                            height: 48px;
                            border-radius: 4px;
                            margin-right: 12px;
                        }
                    }
                    .pagination-wrapper {
                        width: 100%;
                        display: flex;
                        justify-content: flex-end;
                        height: 60px;
                        align-items: center;
                        border: 1px rgba(238, 238, 238, 1) solid;
                        border-top: none;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
.studentQuestion {
    .el-table th {
        background-color: rgba(242, 242, 242, 1);
    }
    .el-table__body-wrapper {
        height: auto !important;;
    }
    .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 52px !important;
    }
    .el-table td, .el-table th {
        padding: 4px 0;
    }
}
</style>
